<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员主页</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
</head>
<div th:replace="fragment/script::contextPath"></div>
<body  ><!--th:style="|background: url(@{/image/admin/adminBackground.png})|"-->
<div>
    <div th:replace="fragment/nav::nav"></div>
    <div class="container">
        <nav class="navbar navbar-light ">
            <div class="container-fluid justify-content-center" >
                <form class="form-inline" th:action="@{/admin/adminIndex}" method="get">
                    <input name="keyWord"  class="form-control mr-sm-2" style="width: 600px" type="search" placeholder="按用户名搜索" aria-label="Search" th:value="${#request.getParameter('keyWord')}">
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit" >Search</button>
                </form>
            </div>
        </nav>
        <div style="opacity: 100%">
            <table class="table table-light table-striped ">
                <thead>
                    <tr>
                        <th scope="col" style="text-align: center">头像</th>
                        <th scope="col" style="text-align: center">用户名</th>
                        <th scope="col" style="text-align: center">昵称</th>
                        <th scope="col" style="text-align: center">状态</th>
                        <th scope="col" style="text-align: center">用户身份</th>
                        <th scope="col" style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr style="text-align: center" th:each="user:${userList}">
                        <td width="100px"><img th:src="@{${user.getUserAvatar()}}" style="width: 50px;height: 50px"></td>
                        <td width="100px" th:text="${user.getUserName()}" style="font-size: 20px;text-align: center" class="align-middle"></td>
                        <td width="100px" th:text="${user.getNickName()}" style="font-size: 20px;text-align: center" class="align-middle"></td>
                        <td width="100px" th:switch="${user.getUserStatus()}"style="font-size: 20px;text-align: center" class="align-middle">
                            <span th:case="0">正常</span>
                            <span th:case="1">封禁</span>
                        </td>
                        <td width="100px" style="font-size: 20px;text-align: center" class="align-middle">普通用户</td>
                        <td width="200px">
                            <button type="button" class="btn btn-outline-primary btn-sm"
                                    th:onclick = "editUserInfo([[${user.getUserId()}]],[[${user.getUserName()}]],[[${user.getNickName()}]])" >编辑</button>
                            <button type="button" class="btn btn-outline-warning btn-sm" th:onclick = "banUserInfo([[${user.getUserId()}]],[[${user.getUserStatus()}]])" th:text="${user.getUserStatus()==0?'封禁':'解封'}"></button>
                            <button type="button" class="btn btn-outline-danger btn-sm" th:onclick = "delUserInfo([[${user.getUserId()}]],[[${user.getUserStatus()}]])">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- Modal 编辑信息-->
<div class="modal fade" id="editUser" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/admin/adminEditUser}" method="post">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">编辑用户信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="userId" id="userId">
                <div class="form-group">
                    <label for="userName">用户名</label>
                    <input type="text" class="form-control" id="userName" name="userName">
                </div>
                <div class="form-group">
                    <label for="nickName">昵称</label>
                    <input type="text"class="form-control" id="nickName" name="nickName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" >提交</button>
            </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script>
function editUserInfo(userId,userName,nickName) {
    //data-toggle="modal" data-target="#editUser"
    $("#userId").val(userId);
    $("#userName").val(userName);
    $("#nickName").val(nickName);
    $("#editUser").modal("show");
}
function banUserInfo(userId,userStatus) {
    if (userStatus===0){
        $.post(contextPath+"/admin/adminBanUser",{userId,userStatus:1},function () {
                window.location.reload();
                alert("操作成功");
        })
    }else if (userStatus===1){
        $.post(contextPath+"/admin/adminBanUser",{userId,userStatus:0},function () {
            window.location.reload();
            alert("操作成功");
        })
    }
}
function delUserInfo(userId,userStatus) {
    if (userStatus===0||userStatus===1){
        $.post(contextPath+"/admin/adminDelUser",{userId,userStatus:2},function () {
            window.location.reload();
            alert("操作成功");
        })
    }
}
</script>